import React,{PureComponent} from "react";
import PropTypes from 'prop-types';
import ModalBox from 'react-native-modalbox';
import {StyleSheet,View,Text,TextInput,KeyboardAvoidingView,TouchableWithoutFeedback,Modal,Keyboard,Platform} from 'react-native'

class ChatInputBar extends PureComponent{
  constructor(props) {
    super(props);
    this.state={
      isEmotionsVisible:false,
      modalVisible:false,
      inputValue:'',
      cursorIndex:0,
      autoFocus:true,
      tempSendTxtArray:[],
    }
  }

  static propTypes={
    placeholder:PropTypes.string,
    dismiss:PropTypes.func
  }

  static defaultProps={
    placeholder:'说点什么',
    dismiss:()=>{}
  }

  openInputBar(){
    if (Platform.OS === 'android'){
      this.refs.modal.open();
    }
    else {
      this.setState({
        modalVisible:!this.state.modalVisible,
      });
    }
  }
  closeInputBar(){
    if (Platform.OS === 'android'){
      this.refs.modal.close();
    }
    else {
      this.setState({
        modalVisible:false,
      });
    }
    this.props.dismiss()
  }

  _onFocus(){
    this.setState({
      isEmotionsVisible:false,
    });
  }

  _onInputChangeText(text){

    //设值
    this.setState({
      inputValue:text,
    });

    //改变按钮颜色
    if (text !== '' && text.length > 0){
      this.refs.sendBtnWrapper.setNativeProps({
        style:{
          backgroundColor:'#E39354'
        },
      });

      this.refs.sendBtnText.setNativeProps({
        style:{
          color:'#fff'
        },
      });
    }
    else {
      this.refs.sendBtnWrapper.setNativeProps({
        style:{
          backgroundColor:'#f5f5f5'
        }
      });

      this.refs.sendBtnText.setNativeProps({
        style:{
          color:'#bbbbbb',
        }
      });
    }
  }

  _onModalBoxClosed(){
    this.setState({
      isEmotionsVisible:false,
    });
  }

  _onSendMsg(){
    if (this.state.inputValue !== '' && this.state.inputValue.length > 0) {
      this._onInputChangeText('');
      this.props.onSend(this.state.inputValue);
      this.setState({inputValue:''})
    }
  }
  _onSelectionChange(event){
    this.setState({
      cursorIndex:event.nativeEvent.selection.start,
    });
  }


  _renderAndroidView(){
    return <ModalBox
      swipeToClose={false}
      backdropOpacity={0}
      backButtonClose={true}
      onClosed={() => this._onModalBoxClosed()}
      style={[styles.container]} position={'bottom'} ref={'modal'}>
      <TouchableWithoutFeedback onPress={() => this.closeInputBar()}>
        <View style={styles.box_container}/>
      </TouchableWithoutFeedback>
      <View style={styles.inputContainer}>
        <View style={styles.textContainer}>
          <TextInput
            ref="textInput"
            style={styles.inputStyle}
            underlineColorAndroid="transparent"
            multiline = {true}
            autoFocus={true}
            editable={true}
            placeholder={this.props.placeholder}
            placeholderTextColor={'#bababf'}
            onSelectionChange={(event) => this._onSelectionChange(event)}
            onChangeText={(text) => this._onInputChangeText(text)}
            onSubmitEditing={()=>{this._onSendMsg()}}
            onFocus={() => this._onFocus()}
            defaultValue={this.state.inputValue}/>

          <TouchableWithoutFeedback onPress={() => this._onSendMsg()}>
            <View ref="sendBtnWrapper" style={[styles.sendBtnStyle]}>
              <Text ref="sendBtnText" style={[styles.sendBtnTextStyle]}>发送</Text>
            </View>
          </TouchableWithoutFeedback>
        </View>
      </View>
    </ModalBox>;
  }

  _renderIosView(){
    return <Modal
      animationType={'slide'} transparent={true} visible={this.state.modalVisible}>

      <TouchableWithoutFeedback onPress={() => this.closeInputBar()}>
        <View style={styles.box_container}/>
      </TouchableWithoutFeedback>

      <KeyboardAvoidingView behavior={'position'}>
        <View style={styles.inputContainer}>

          <View style={styles.textContainer}>
            <TextInput
              ref="textInput"
              style={styles.inputStyle}
              underlineColorAndroid="transparent"
              multiline = {true}
              autoFocus={true}
              editable={true}
              keyboardType={'default'}
              selectionColor={'#56b2f0'}
              returnKeyType={'send'}
              placeholder={this.props.placeholder}
              enablesReturnKeyAutomatically={true}
              placeholderTextColor={'#bababf'}
              onSelectionChange={(event) => this._onSelectionChange(event)}
              onChangeText={(text) => this._onInputChangeText(text)}
              onSubmitEditing={()=>{this._onSendMsg()}}
              onFocus={() => this._onFocus()}
              defaultValue={this.state.inputValue}/>

            <TouchableWithoutFeedback onPress={() => this._onSendMsg()}>
              <View ref="sendBtnWrapper" style={[styles.sendBtnStyle]}>
                <Text ref="sendBtnText" style={[styles.sendBtnTextStyle]}>发送</Text>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </View>
      </KeyboardAvoidingView>
    </Modal>;
  }

  render(){
    if (Platform.OS === 'android'){
      return this._renderAndroidView();
    }
    return this._renderIosView();
  }
}

export default module=ChatInputBar

ChatInputBar.propTypes = {
  onSend:PropTypes.func,  //返回text文本
  isVisible:PropTypes.bool,
};

const styles = StyleSheet.create({
  container: {
    width:'100%',
    height:235,
    backgroundColor:'transparent',
  },

  box_container: {
    flex:1
  },

  inputContainer: {
    width:'100%',
    position:'absolute',
    bottom:0,
    borderTopColor:'#F8F8F8',
    borderTopWidth:1,
    borderTopStyle:'solid',
  },

  textContainer: {
    width:'100%',
    height:60,
    flexDirection:'row',
    backgroundColor:'#F6F6F6',
    alignItems:'center',
  },

  outside: {
    flex:1,
    width:'100%',
  },

  emojiStyle:{
    height:28,
    width:28,
    marginLeft:10,
  },

  inputStyle:{
    flex:1,
    paddingTop:8,
    paddingBottom:8,
    paddingLeft:10,
    paddingRight:10,
    height:32,
    marginLeft:10,
    marginRight:10,
    backgroundColor:'#fff',
    borderWidth:0,
    borderRadius:20,
    fontSize:15,
  },

  sendBtnTextStyle:{
    fontSize:15,
    color:'#bbbbbb'
  },

  sendBtnStyle:{
    height:32,
    width:62,
    justifyContent:'center',
    alignItems:'center',
    marginRight:10,
    borderRadius:15,
    backgroundColor:'#f5f5f5'
  },
});
